<template>
    <!-- 部门 -->
    <!--  1、新增部门的时候不用管科室    -->
    <!--  2、新增科室的时候必须选部门    -->







    <div id="department">
        <!-- 响应式布局 -->
        <!--<el-row >  默认占满屏 一用就把左边的覆盖了，不知道为什么 -->
        <div style="width: 100%;height: 85px;background-color: #FAFAFA;padding-top: 1%;">
            <el-col :xs="4" :sm="3" :md="3" :lg="3" style="margin:0 1%">
                <el-input placeholder="部门名称" v-model="DepartmentName"></el-input>
            </el-col>
            <!--  加一个   科室名  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>11111111  -->
            <!--<el-col :xs="4" :sm="3" :md="3" :lg="3" style="margin:0 1%">-->
                <!--<el-input placeholder="部门名称" v-model="DepartmentName"></el-input>-->
            <!--</el-col>-->
            <el-col :xs="3" :sm="2" :md="2" :lg="2" style="margin: 0 1%">
                <el-select v-model="valueFactory" clearable placeholder="工厂">
                    <el-option v-for="item in FactoryOptions" :key="item.ID" :label="item.FactoryName" :value="item.ID"></el-option>
                </el-select>
            </el-col>
            <el-col :xs="15" :sm="15" :md="12" :lg="10" style="text-align: left">
                <el-button type="primary" @click="selectTable">查询</el-button>
                <el-button type="success" @click="addDepartment">新增部门</el-button>
                <el-button type="success" @click="addOffice">新增科室</el-button>
                <!--<el-button type="success" @click="selectParent">父级</el-button>-->
            </el-col>

        </div>
        <!-- max-height 600时就固定表头，显示滚动条  show-overflow-tooltip 表格内容多了可以显示一个提示框显示剩余内容   sortable排序 -->
        <el-table  max-height="600" class="table_department" stripe border ref="multipleTable" :data="tableData" tooltip-effect="dark"
                   style="width: 88%;text-align: center !important;">
            <!--  科室    部门 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>222222222 -->
            <el-table-column prop="index" sortable label="序号"></el-table-column>
            <!--<el-table-column prop="DepartmentName" label="科室代号"></el-table-column>-->
            <!--<el-table-column prop="DepartmentName" label="科室名称"></el-table-column>-->
            <!--<el-table-column prop="DepartmentCode" sortable label="部门代号"></el-table-column>-->
            <!--<el-table-column prop="DepartmentName" label="部门名称"></el-table-column>-->
            <!--<el-table-column prop="DepartManagerID" label="主管工号" v-if="false"></el-table-column>-->
            <!--<el-table-column prop="FactoryName" sortable label="工厂名称"></el-table-column>-->
            <!--<el-table-column prop="HeadCount" sortable label="人员总数"></el-table-column>-->
            <!--<el-table-column prop="HeadCount" sortable label="新增的是：部门/科室"></el-table-column>-->
            <!--<el-table-column prop="FactoryID" label="工厂号" v-if="false"></el-table-column> &lt;!&ndash;  工厂号 隐藏  &ndash;&gt;-->

            <el-table-column prop="ParentDepartID" label="父级部门号" v-if="false"></el-table-column>
            <el-table-column prop="ParentDepartName" sortable label="父级部门"></el-table-column>
            <el-table-column prop="DepartManagerName" label="部门主管"></el-table-column>
            <el-table-column prop="DepartManagerID" label="主管工号" v-if="false"></el-table-column>
            <el-table-column prop="FactoryID" label="工厂号" v-if="false"></el-table-column>
            <el-table-column prop="FactoryName" sortable label="工厂名称"></el-table-column>
            <el-table-column prop="HeadCount" sortable label="人员总数"></el-table-column>



            <!--  科室代号  科室名称  部门号  部门名称  -->
            <el-table-column label="人员详情">
                <template scope="scope">
                    <el-button type="primary" size="small" @click="handlePeople(scope.$index, scope.row)">
                        人员
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="OpeartionUseID" label="用户工号" v-if="false"></el-table-column>
            <el-table-column prop="OpeartionUseName" label="用户名称"></el-table-column>
            <el-table-column prop="ModifyDate" sortable label="时间"></el-table-column>
            <!-- 修改和删除 -->
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button size="small"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="text-align: right;padding: 4% 1% 0 0">       <!-- , jumper 加到layout里面 前往第 几 页     -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="PageCount" :page-sizes="[10, 20, 30, 40,50]"
                           :current-page="CurrentPage"  layout="total,sizes, prev, pager, next" :total="Total"></el-pagination>
        </div>
        <!-- 新增部门  必须要选工厂 -->
        <el-dialog title="新增部门" :visible.sync="addFormVisible">
            <el-form :model="form" style="text-align: left">
                <el-form-item label="部门名称" :label-width="formLabelWidth">
                    <el-input v-model="form.DepartmentName" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <!-- 选择工厂的时候就应该把父级部门拿到 -->
                <el-form-item label="工厂" :label-width="formLabelWidth">
                    <el-select @change="selectParent" v-model="valueFactory" clearable placeholder="厂区">
                        <el-option  v-for="item in FactoryOptions" :key="item.ID" :label="item.FactoryName" :value="item.ID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="父级部门" :label-width="formLabelWidth">
                    <!-- 父级部门怎么拿到 -->
                    <el-select v-model="valueParent" clearable clearable placeholder="父级部门" style="float: left">
                        <el-option v-for="item in ParentOptions" :key="item.DepartmentCode" :label="item.DepartmentName" :value="item.DepartmentCode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主管工号" :label-width="formLabelWidth">
                    <el-input v-model="form.DepartManagerID" auto-complete="off" style="width: 80%"></el-input>
                </el-form-item>
                <!--<el-form-item label="主管名称" :label-width="formLabelWidth">-->
                    <!--<el-input v-model="form.DepartManagerName" auto-complete="off" style="width: 80%"></el-input>-->
                <!--</el-form-item>-->





                <!--<el-form-item :label-width="formLabelWidth" style="text-align: left">-->
                    <!--<el-input v-model="WorkStationKey"  auto-complete="off" style="width: 180px;float: left;padding-right: 3%"></el-input>-->
                    <!--<el-button @click="selectStationTable" label="">查询</el-button>-->
                <!--</el-form-item>-->
                <!-- 新增工站 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
                <!--<el-form-item label="工站" :label-width="formLabelWidth" >-->
                    <!--<el-table ref="multipleTable1"   @selection-change="handleSelectionChange" class="table_production" max-height="300"  stripe border :data="StationTableData" tooltip-effect="dark"-->
                              <!--style="width: 100%;text-align: center !important;">-->
                        <!--<el-table-column type="selection"  label="复选框"></el-table-column>-->
                        <!--<el-table-column prop="index" label="序号"></el-table-column>-->
                        <!--<el-table-column prop="WorkStationNum" label="工站号"></el-table-column>-->
                        <!--<el-table-column prop="WorkStationName" label="工站名称"></el-table-column>-->
                        <!--<el-table-column prop="WorkContent" show-overflow-tooltip label="工站内容" ></el-table-column>-->
                    <!--</el-table>-->
                <!--</el-form-item>-->

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addForm">确 定</el-button>
            </div>
        </el-dialog>
        <!--  新增科室  必须要选部门  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  333333333  -->


        <!-- 修改部门 -->
        <el-dialog title="修改部门" :visible.sync="EditFormVisible">
            <el-form :model="formEdit" style="text-align: left">
                <el-form-item label="部门号" :label-width="formLabelWidthEdit">
                    <!--${this.formEdit.WorkStationNum}   工站号显示到这边，但不能修改  -->
                    <el-input v-model="formEdit.DepartmentCode" :disabled="true" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="部门名称" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.DepartmentName" auto-complete="off" style="width: 80%;"></el-input>
                </el-form-item>
                <!-- 父级部门 ？？？？？？  -->
                <el-form-item label="父级部门" :label-width="formLabelWidthEdit">
                    <el-select v-model="formEdit.ParentDepartID" clearable placeholder="父级部门">
                        <el-option v-for="item in EditParentOptions" :key="item.DepartmentCode" :label="item.DepartmentName" :value="item.DepartmentCode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="主管工号" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.DepartManagerID" auto-complete="off" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="工厂名称" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.FactoryName" auto-complete="off" style="width: 80%;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 删除部门 -->
        <el-dialog title="删除部门" :visible.sync="DeleteFormVisible">
            <el-form :model="formDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除此部门吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteForm" >确定</el-button>
            </div>
        </el-dialog>
        <!-- 人员详情 -->
        <el-dialog title="人员详情" :visible.sync="PeopleFormVisible" style="">

            <el-form :model="formPeople" style="">
                <!-- 穿梭框 ！！！！！！！！！！！！！！！！   key: 'value',   ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ -->
                <el-transfer style="text-align: left;padding: 0 15%"
                             filterable
                             filter-placeholder="请输入员工号"
                             :titles="['非本部门', '本部门']"
                             v-model="value"
                             :props="{
                                key: 'JobNumber',
                                label: 'UserName'
                             }"
                        :data="DepartDate">
                </el-transfer>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="PeopleFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="PeopleForm" >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    export default{
        data(){   // 穿梭框
            return{
//      1、 一打开页面就加载  工厂、部门、科室的   下拉框
//      2、点击新增科室    依次加载  工厂、部门下拉框   输入 科室名称等  自动生成科室代码
//      3、点击新增部门    加载  工厂下拉框   输入 部门名称等   自动生成部门代码
//      4、点击编辑    通过表格生成时传过来的值判断   应该编辑 部门还是科室

                //     穿梭框
                DepartDate:[],  //  该工厂下所有部门的人员
                value:[],
                //    表格
                tableData:[],
                FactoryName:'',
                ParentOptions:[],     // 父级
                FactoryOptions:[],    //  工厂   一加载页面就出现工厂的下拉框
                valueFactory:'',    //  选择的是哪个工厂号
                valueParent:'',     //  选择的是哪个父级ID
                //  修改时，获取的父级下拉框
                EditParentOptions:[],
                //  修改时的字段
                DepartmentCode:'',   //  部门号
                DepartmentName:'',   //  部门名
                //  查询的时候传过去的后台参数
                DepartManagerName:'',   //  主管名称
                FactoryID:'' ,   //  工厂号
                //     分页
                PageCount:10,    // 每页几条   page-size
                CurrentPage:1,   // 当前是第几页
                Total:0,    // 总数
                //   新增部门     将 form表单改成自己的参数
                addFormVisible: false,
                form: {
                    DepartmentName:'',
                    ParentDepartID: 0 ,    //  父级部门
                    DepartManagerID:'',   //  主管工号
                    FactoryID:0,  //  工厂号   //   确认选择的是哪个工厂，从而确定此工厂下所有的父级
                },
                formLabelWidth: '100',
                //  修改部门
                EditFormVisible: false,
                formEdit:{
                    ParentDepartID: 0,      //   根据该行里面选中的是哪个工厂，从而得到该工厂下面所有的父级部门
                },
                formLabelWidthEdit:'100',
                //  删除部门
                DeleteFormVisible: false,
                formDelete:{},
                formLabelWidthDelete:'100',
                //  详细人员展示
                PeopleFormVisible:false,
                formPeople:{
                    DepartmentCode:0,   //  人员详情的时候传过去部门号
                    FactoryID:0,
                },
                formLabelWidthPeople:'100',
            }
        },
        methods:{
            //   一加载页面就应该知道有哪些工厂
            getFactory(url){
                this.$http.get(url,).then(response => {
                    this.FactoryOptions = [];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.FactoryOptions = response.data.ObjList ;
                    }

                }, response => {
                    console.log(" 工厂请求失败");
                    console.log(response)
                })
            },
            selectFactory(){    // 校验输入信息正确性 ，不对直接  return
                let url;
                url = "http://192.168.3.238:8088/Department/GetFactoryInfo" ;
                this.getFactory(url)
            },
            //   一选择工厂的时候就应该获取父级下拉框
            getParent(url){
                this.$http.get(url,).then(response => {
                    this.ParentOptions = [];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.ParentOptions = response.data.ObjList ;
                    }
                console.log("父级下拉框成功");
                }, response => {
                    console.log(" 父级请求失败");
                    console.log(response)
                })
            },
            selectParent(){    // 校验输入信息正确性 ，不对直接  return     FactoryOptions
                let url;
                url = "http://192.168.3.238:8088/Department/GetParentDepartment?FactoryID=" + this.valueFactory ;
                this.getParent(url)
            },
            // 一点开编辑部门，就获取该工厂下所有的父级下拉框
            getParentEdit(url){
                this.$http.get(url,).then(response => {
                    this.EditParentOptions = [];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.EditParentOptions = response.data.ObjList ;
                    }
                    console.log("修改的父级下拉框");
                    console.log(response.data.ObjList)
                }, response => {
                    console.log(" 修改的父级请求失败");
                    console.log(response)
                })
            },
            selectParentEdit(){
                let url;
                url = "http://192.168.3.238:8088/Department/GetParentDepartment?FactoryID=" + this.formEdit.FactoryID ;
                console.log("编辑下拉框");
                this.getParentEdit(url)
            },
            //   分页
            handleSizeChange(val) {
                this.PageCount = val ;   //  每页几条
                this.selectTable();
            },
            handleCurrentChange(val) {
                this.CurrentPage = val ;   // 当前是第几页
                this.selectTable();     //  点击分页的时候
            },
            //   get  传给后台值  供查询使用  显示部门列表  已完
            getData(url){
                this.$http.get(url,).then(response => {
                    // success callback   需要一个alert告诉你查询到了
                    this.tableData=[];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.Total = response.data.Total;
                        for(let i=0;i<response.data.ObjList.length;i++){
                            this.tableData.push(response.data.ObjList[i]);
                            response.data.ObjList[i].index=i+1;
                        }
                    }

                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                })
            },
            selectTable(){    // 校验输入信息正确性 ，不对直接  return
                let url;
                //     加的去空判断
                this.isLoding=true;
                this.DepartmentName = this.DepartmentName.trim();
                this.FactoryID = this.FactoryID.trim();
                url = "http://192.168.3.238:8088/Department/GetDepartmentPage?DepartmentName=" + this.DepartmentName +
                    "&FactoryID=" + this.FactoryID+
                    "&PageCount="+this.PageCount+"&CurrentPage="+ this.CurrentPage;
                this.getData(url)
            },
            //   新增部门
            addDepartment() {
                this.selectFactory();
                this.addFormVisible = true;
            },
            addForm(){     //   post
                let JobNumber = 1;
                let addUrl = "http://192.168.3.238:8088/Department/AddDepartment";
                let addForm = {
                    "DepartmentName": this.form.DepartmentName,
                    "ParentDepartID": this.valueParent,   //  父级部门ID
                    "DepartManagerID": this.form.DepartManagerID,   //  主管ID
                    "FactoryID": this.valueFactory,   // 工厂ID
                    "JobNumber": JobNumber,
                };
                console.log("传过去的是空吗")
                console.log(addForm)
                console.log(addUrl)
                let that = this;
                if (this.form.DepartmentName.length === 0) {
                    console.log("请输入工序名称");
                    return 0;
                } else {
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            that.addFormVisible = false;
                            that.selectTable();
                            console.log("添加成功");
                            console.log(response);
//                        需要提示
                        })
                        .catch(function (error) {
                            console.log(error);
                            console.log("错误");
                        });
                }
            },
            //   编辑修改部门   post
            handleEdit(index, row) {
                this.EditFormVisible = true;
                this.formEdit = row ;
                this.DepartManagerID();    //  主管ID为 0 ，把ID置为null
                this.selectParentEdit();
                console.log("修改部门获取的全部字段");
                console.log(this.formEdit);
                //  部门号不能修改，只是作为参数传给后台
            },
            EditForm() {    //   post
                let JobNumber = 1 ;
                let EditUrl = "http://192.168.3.238:8088/Department/UpdateDepartment";
                let EditForm = {
                    "ParentDepartID":this.formEdit.ParentDepartID,     //  父级部门
                    "DepartmentName":this.formEdit.DepartmentName,   //  部门名称
                    "DepartmentCode":this.formEdit.DepartmentCode,   //  部门号
                    "DepartManagerID":this.formEdit.DepartManagerID,   // 主管工号
                    "FactoryName":this.formEdit.FactoryName,   //  工厂名称
                    "FactoryID":this.formEdit.FactoryID,   //  工厂名称
                    "JobNumber":JobNumber
                };
                console.log("修改部门的时候传的什么");
                console.log(EditForm);
                console.log(EditUrl);
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditFormVisible = false;
                        that.selectTable();
                        console.log("修改成功");
                        console.log(response);
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //   删除部门
            handleDelete(index, row) {
                this.DeleteFormVisible = true ;
                this.formDelete = row ;
            },
            DeleteForm(){
                let DeleteUrl = "http://192.168.3.238:8088/Department/DeleteDepartment";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    DepartmentCode:this.formDelete.DepartmentCode
                };
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        console.log("删除成功")
                        that.DeleteFormVisible = false;     //  关闭窗口
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //  详细人员展示
            filterMethod(query, item) {
                return item.pinyin.indexOf(query) > -1;
            },
            handlePeople(index, row){
                this.PeopleFormVisible = true ;
                this.formPeople = row ;   // 只需要把选中的部门号给后台就好了
                let PeopleUrl = "http://192.168.3.238:8088/Department/GetDepartUser?DepartID="+this.formPeople.DepartmentCode+"&FactoryID="+this.formPeople.FactoryID ;
                this.$http.get(PeopleUrl,).then(response => {
                    // success callback   需要一个alert告诉你查询到了
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        //  部门所有的人员
                        this.DepartDate = response.data.ObjList;
                        //    本部门已有的人员
                        this.value = response.data.StrID ;
                    }

                }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                });
            },
            PeopleForm(){
                let PeopleUrl = "http://192.168.3.238:8088/Department/AddDepartUser";
                let PeopleItem = {   //  跟后端约定好的JSON格式
                    "JobNumberS": this.value ,
                    "DepartID": this.formPeople.DepartmentCode,
                };
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(PeopleUrl, PeopleItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        console.log("成功")
                        console.log(response);
                        that.PeopleFormVisible = false;     //  关闭窗口
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
//            data() {
//
//            },
            // 主管工号为0 ，则置为null
            DepartManagerID(){
                if(this.formEdit.DepartManagerID == 0 || this.formEdit.ParentDepartID == 0){
                    this.formEdit.DepartManagerID = null ;
                    this.formEdit.ParentDepartID = null ;
                }
            }
        },
        mounted :function () {   //  onload
            this.selectFactory();   // 请求到工厂的下拉框
            this.selectTable();    //  请求到表格
        }
    }
</script>



<style>
    * {
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
    }

    #department {
        height: 100%;
    }
    /* 表头数据居中 */
    .table_department thead tr th {
        text-align: center;
    }

</style>